<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>实时数据>设备报警观测</title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all" />
  <link rel="stylesheet" href="../../css/public.css" media="all" />
  <link rel="stylesheet" href="../../lib/dateTime/bootstrap.css" />
  <link rel="stylesheet" href="../../lib/dateTime/bootstrap-datetimepicker.min.css" />
</head>

<body>
  <div class="layuimini-container">
    <div class="layuimini-main">
      <!-- 搜索条件 -->
      <fieldset class="table-search-fieldset" style="margin-bottom: 10px">
        <legend>搜索信息</legend>
        <div style="margin: 10px 10px 10px 10px">
          <div class="layui-form layui-form-pane">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-inline">
                  <input type="text" id="beginTime" lay-verify="required|account" autocomplete="off" placeholder="输入时间"
                    class="form-control" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-inline">
                  <input type="text" id="endTime" lay-verify="required|account" autocomplete="off" placeholder="输入时间"
                    class="form-control layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">报警类型</label>
                <div class="layui-input-inline">
                  <input type="text" id="alarmType" lay-verify="required|account" autocomplete="off"
                    placeholder="输入报警类型" class="form-control layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <button id="AlramSeach" class="layui-btn layui-btn-primary" style="margin-top: -5px">
                  <i class="layui-icon"></i> 搜 索
                </button>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
      <table class="layui-hide" id="HcurrentTableId" lay-filter="currentTableFilter"></table>
    </div>
  </div>
  <script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
  <script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
  <script src="../../lib/dateTime/jquery-1.8.3.min.js"></script>
  <script src="../../lib/dateTime/bootstrap-datetimepicker.min.js"></script>
  <script src="../../lib/dateTime/bootstrap-datetimepicker.zh-CN.js"></script>
  <script>
    layui.use(["form", "table", "miniTab"], function () {
      // 2020-03-25 HF 保存token
      var token = sessionStorage.getItem("newtoken");
      var nb = JSON.parse(sessionStorage.getItem("SaveAlarmName"));
      var AlarmName = sessionStorage.getItem("SaveName");
      var eventAll;

      var $ = layui.jquery,
        form = layui.form,
        miniTab = layui.miniTab,
        table = layui.table;
      miniTab.listen();
      /*********************************************/
      function add0(m) {
        return m < 10 ? "0" + m : m;
      } //避免少0
      // 当前时间
      var time = new Date();
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var date = time.getDate();
      var hours = time.getHours();
      var minutes = time.getMinutes();
      var seconds = time.getSeconds();
      var s2 =
        year +
        "-" +
        add0(month) +
        "-" +
        add0(date) +
        " " +
        add0(hours) +
        ":" +
        add0(minutes) +
        ":" +
        add0(seconds);
      var s1 =
        year +
        "-" +
        add0(month) +
        "-" +
        add0(date) +
        " " +
        add0(0) +
        ":" +
        add0(0) +
        ":" +
        add0(0);
      $("#beginTime").val(s1);
      $("#endTime").val(s2);

      /*******************实时更新当前时间**********************/
      var cltime = setInterval(function () {
        let nowtime = new Date();
        var s1 = GMTToStr(nowtime);
        $("#endTime").val(s1);
      }, 1000);

      // 打开窗口
      $("#alarmType").click(function () {
        var index = layer.open({
          title: "报警类型",
          type: 2,
          shade: 0.2,
          maxmin: true,
          shadeClose: true, //点击遮罩不关闭
          area: ["80%", "85%"],
          content: "HalarmType.html",
          success: function () {
            //   删除缓存  优化交互体验
            sessionStorage.removeItem("SaveAlarm");
          },
          end: function () {
            // 获取HalarmType页面保存的event参数
            eventAll = JSON.parse(sessionStorage.getItem("SaveAlarm"));
            // 获取已选择几项
            if (sessionStorage.getItem("SaveNo")) {
              $("#alarmType").attr(
                "placeholder",
                sessionStorage.getItem("SaveNo")
              );
              sessionStorage.removeItem("SaveNo");
            } else {
              $("#alarmType").attr(
                "placeholder",
                "请选择报警事项匹配查询 ！"
              );
              sessionStorage.getItem("SaveNo");
            }
          },
          cancel: function (index, layero) {
            //点击x关闭回调
            // var obj = layero.find("iframe")[0].contentWindow;
            // layer.close(index);
            // console.log(58);
            //  return false;
          },
        });
        // $(window).on("resize", function () {
        //     layer.full(index);
        // });
      });

      // 输入日期  报警事项  搜索结果
      $("#AlramSeach").click(function () {
        var beginTime = $("#beginTime").val();
        var endTime = $("#endTime").val();
        index = layer.load(1);
        // 判断时间非空
        if (beginTime != "" && endTime != "" && eventAll != null) {
          function getDaysByDateString(dateString1, dateString2) {
            var startDate = Date.parse(dateString1);
            var endDate = Date.parse(dateString2);
            var diffDate = endDate - startDate + 1 * 24 * 60 * 60 * 1000;
            var days = parseInt(diffDate / (1 * 24 * 60 * 60 * 1000));
            return days;
          }
          // 验证查询时间   不能过大和过小
          days = getDaysByDateString(beginTime, endTime);
          if (days > 180) {
            layer.msg("错误！查询时间段不能大于180天");
            return false;
          }
          if (days < 0 || days == 0) {
            layer.msg("错误！开始时间必须大于结束时间");
            layer.close(index);
          }

          //  绘制表格
          table.render({
            elem: "#HcurrentTableId",
            url:
              "/oms-web/events/events-authority-points?token=" +
              token +
              "&beginTime=" +
              beginTime +
              "&endTime=" +
              endTime +
              "&pageNum=" +
              1 +
              "&pageSize=" +
              10,
            method: "POST",
            contentType: "application/json",
            where: { telePtss: nb, events: eventAll },
            parseData: function (res) {
              //res 即为原始返回的数据
              console.log(res);
              return {
                code: res.code, //解析接口状态
                msg: res.msg, //解析提示文本
                count: res.data.total, //解析数据长度
                data: res.data.list, //解析数据列表
              };
            },
            toolbar: "#toolbarDemo",
            defaultToolbar: [
              "filter",
              "exports",
              "print",
              {
                title: "提示",
                layEvent: "LAYTABLE_TIPS",
                icon: "layui-icon-tips",
              },
            ],

            cols: [
              [
                //复选框 {type: "checkbox", width: 50, fixed: "left"},
                {
                  type: "numbers",
                  width: 40,
                  title: "序号",
                  align: "center",
                },
                {
                  field: "stationName",
                  width: 150,
                  title: "站名称",
                  align: "center",
                },
                {
                  field: "deviceName",
                  width: 150,
                  title: "设备名称",
                  align: "center",
                },
                {
                  field: "terminalName",
                  width: 130,
                  title: "终端名称",
                  align: "center",
                },
                {
                  field: "ptsName",
                  width: 100,
                  title: "测量点",
                  align: "center",
                },
                {
                  field: "dataValue",
                  width: 80,
                  title: "数值",
                  sort: true,
                  align: "center",
                },
                {
                  field: "typeText",
                  width: 130,
                  title: "报警类型",
                  fixed: "right",
                  align: "center",
                },
                {
                  field: "eventText",
                  minWidth: 50,
                  title: "报警描述",
                  fixed: "right",
                  align: "center",
                },
                {
                  field: "eventTime",
                  minWidth: 50,
                  title: "时间",
                  fixed: "right",
                  align: "center",
                },
                // {title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
              ],
            ],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            done: function (res) {
              if (res.code == -1) {
                window.location = "../login-1.html";
              }
              layer.close(index);
            },
          });
        } else {
          layer.msg("请填写开始时间 -- 结束时间 -- 报警事项！");
          layer.close(index);
        }
      });

      //获取时间函数
      function GMTToStr(time) {
        function add0(m) {
          return m < 10 ? "0" + m : m;
        } //避免少0
        var time = new Date(time);
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        return (
          year +
          "-" +
          add0(month) +
          "-" +
          add0(date) +
          " " +
          add0(hours) +
          ":" +
          add0(minutes) +
          ":" +
          add0(seconds)
        );
      }

      // 日期插件
      $("#beginTime").datetimepicker({
        language: "zh-CN", //显示中文
        format: "yyyy-mm-dd hh:ii:ss", //显示格式
        // minView: "month",//设置只显示到月份
        initialDate: new Date(), //初始化当前日期
        autoclose: true, //选中自动关闭
        todayBtn: true, //显示今日按钮
        // minView:'month',
        language: "zh-CN",
      });
      $("#endTime")
        .datetimepicker({
          language: "zh-CN", //显示中文
          format: "yyyy-mm-dd hh:ii:ss", //显示格式
          // minView: "month",//设置只显示到月份
          initialDate: new Date(), //初始化当前日期
          autoclose: true, //选中自动关闭
          todayBtn: true, //显示今日按钮
          // minView:'month',
          language: "zh-CN",
        })
        .on("changeDate", function (ev) {
          window.clearInterval(cltime);
        });
    });
  </script>
</body>

</html>